<template>
  <div style="height: 350px">
    <ul class="infinite-list" style="overflow: auto;">
      <li v-if="!list.length" style="margin-top: 50px;">
        无查询结果，
        <div class="add-quotation" @click="addQuotation">前往新增引文页面</div>
      </li>
      <li v-for="(it,i) in list" :key="i" @click="index=i" class="infinite-list-item">
        <el-tooltip class="box-item" effect="dark" :content="it.title+' [编号：'+it.doi+'，作者：'+it.authorsName+']'">
          <el-text truncated v-if="index===i" style="width: 100%;height: 100%" class="selected">《{{ it.title }}》&nbsp;&nbsp;【编号：{{ it.doi }}，作者：{{ it.authorsName }}】</el-text>
          <el-text truncated v-else style="width: 100%;height: 100%">《{{ it.title }}》&nbsp;&nbsp;【编号：{{ it.doi }}，作者：{{ it.authorsName }}】</el-text>
        </el-tooltip>
      </li>
    </ul>
    <span v-if="list.length>0" style="float: right">共查出{{ list.length }}条记录</span>
  </div>
</template>

<script setup>
import {defineModel, inject} from "vue";
import {ElMessage} from "element-plus";

const list = defineModel()
const index = inject('index')

const addQuotation = () => {
  if (confirm('是否跳转到新增引文页面')) {
    ElMessage.info('暂不支持')
  }
}
</script>

<style scoped>
.infinite-list {
  max-height: 350px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 5px;
  height: 30px;
  margin: 2px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item:hover {
  background-color: bisque;
  cursor: pointer;
}

.infinite-list .infinite-list-item .selected {
  background-color: bisque;
}

.add-quotation {
  display: inline-block;
  color: blue;
}

.add-quotation:hover {
  cursor: pointer;
  color: red;
}
</style>
